<template>
    <el-row class="home" :gutter="20">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <!--全部-->
            <el-tab-pane label="全部" name="all">
                <el-card >
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="编号"
                                prop="num"
                                width="100"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题"
                                width="150"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="score"
                                label="分数"
                                width="70"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="typeId"
                                label="题目类型"
                                width="100"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="difficult"
                                label="难度"
                                width="70"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="author"
                                label="作者"
                                width="100"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-button v-if="role == '1'" @click="enterQuestion(scope.row)" type="primary" icon="el-icon-thumb" size="small">做题</el-button>
                                <el-button v-if="role == '2'" @click="enterQuestion(scope.row)" type="primary" icon="el-icon-search" size="small">查看</el-button>
                                <el-button v-if="role == '2'" @click="deleteQuestion(scope.row)" type="danger" icon="el-icon-delete" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>

            <!--我的-->
            <el-tab-pane label="我的" name="my" v-if="role == '1'">
                <el-card >
                    <div style="margin-top: 10px;margin-bottom: 5px">
                        <el-button @click="addQuestion()" type="success" plain>新增</el-button>
                        <el-button @click="toggleSelection()" type="warning" plain>取消</el-button>
                        <el-button @click="deleteQuestion()" type="danger" plain>批量删除</el-button>
                    </div>
                    <el-table
                            ref="multipleTable"
                            :data="myTableDate"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="indexChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="编号"
                                prop="num"
                                width="100"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题"
                                width="150"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="score"
                                label="分数"
                                width="70"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="typeId"
                                label="题目类型"
                                width="100"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="difficult"
                                label="难度"
                                width="70"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="author"
                                label="作者"
                                width="100"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-tooltip content="做题" placement="bottom" visible-arrow="false">
                                    <el-button @click="enterQuestion(scope.row)" type="primary" icon="el-icon-thumb" size="small"></el-button>
                                </el-tooltip>
                                <el-tooltip content="详情" placement="bottom" visible-arrow="false">
                                    <el-button @click="questionDetail(scope.row)" type="warning" icon="el-icon-search" size="small"></el-button>
                                </el-tooltip>
                                <el-tooltip content="编辑" placement="bottom" visible-arrow="false">
                                    <el-button @click="updateClick(scope.row)" type="success" icon="el-icon-edit" size="small"></el-button>
                                </el-tooltip>
                                <el-tooltip content="删除" placement="bottom" visible-arrow="false">
                                    <el-button @click="deleteQuestion(scope.row)" type="danger" icon="el-icon-delete" size="small"></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </el-row>
</template>

<script>
    //axios
    import axios from 'axios'


    export default {
        name: "ProblemManage",
        data() {
            return {
                tableData: [],
                myTableDate: [],
                form: {},
                multipleSelection: [],
                activeName: 'all',
                ids: '',
                qcollection: [], //题目集列表
                token: '',
                role: ''
            }
        },

        methods: {
            toggleSelection(rows) {
                this.$refs.multipleTable.clearSelection();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick(row) {
                console.log(row);
            },

            //当前选中值的id
            indexChange(sels){
                this.ids = '';
                var ids = sels.map(it=>it.id);
                for(var i = 0; i < ids.length; i++){
                    console.log(ids[i])
                    this.ids = (i == 0) ? this.ids + ids[i] : this.ids + '&' + ids[i];
                }
            },

            //删除题目
            deleteQuestion(data){
                //发送请求
                var that = this;
                if(this.ids == '' && data != null){
                    this.ids = data.id;
                }

                //发送请求
                /*
                    接口: 删除题目
                    请求地址: http://localhost:8881/producer/question/delete
                    请求方法: get
                    请求参数: id，使用&连接
                    响应内容: 响应结果
                */
                axios({
                    method: 'get',
                    url: 'http://localhost:8881/producer/question/delete',
                    params: {
                        ids: this.ids
                    },
                    headers: {
                        token: this.token
                    }
                }).then(function (response) {
                    var res = response.data;
                    if(res.code == 200){
                        that.$message.success('删除成功！');
                        //跳转页面
                        //that.$router.push('/home')
                    }else{
                        that.$message.error('删除失败！');
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },

            //选中编辑
            updateClick(data){
                this.form = data;

                //跳转到编辑页面
                this.$router.push({
                    path: '/admin/problem/input',
                    query: {data: data}
                })
            },

            //新增题目跳转
            addQuestion(){
                this.$router.push('/admin/problem/input')
            },

            //做题跳转
            enterQuestion(data){
                //获取题目集id
                var questionId = data.id;
                //跳转到对应的题目页面
                this.$router.push({
                    path: '/problem',
                    query: {id: questionId}
                })
            },

            //题目详情跳转
            questionDetail(data){
                //获取题目集id
                var id = data.id;
                //跳转到对应的题目页面
                this.$router.push({
                    path: '/admin/problem/detail',
                    query: {id: id}
                })
            }
        },

        created: function () {
            //获取题目集页面传来的题目集id
            var id = this.$route.query.id;

            //初始化表格数据
            let params = {qcollectionId: id};
            var that = this;
            let token = localStorage.getItem('token');
            this.token = token;

            this.role = localStorage.getItem("role");

            //全部
            /*
                接口: 获取全部题目
                请求地址: http://localhost:8881/producer/question/select
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/question/select',
                data: params,
                headers: {
                    token: token
                }
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.tableData = res.data.questionList;
                    //难度
                    var table = that.tableData;
                    for(var i = 0; i < table.length; i++){
                        var diff = table[i].difficult;
                        that.tableData[i].difficult = (diff == 1) ? '简单' : (diff == 2) ? '中等' : '困难';
                    }

                    if(table.length > 0){
                        //发送请求
                        /*
                            接口: 根据Id获取题目集名称
                            请求地址: http://localhost:8881/producer/qcollection/select/ids
                            请求方法: get
                            请求参数: 查询条件
                            响应内容: 响应结果
                        */
                        //获取题目集id
                        var ids = '';
                        for(var i = 0; i < table.length; i++){
                            ids = (i == 0) ? ids + table[i].qcollectionId : ids + '&' + table[i].qcollectionId;
                        }

                        axios({
                            method: 'get',
                            url: 'http://localhost:8881/producer/qcollection/select/ids',
                            params: {ids: ids},
                            headers: {
                                token: token
                            }
                        }).then(function (response) {
                            var res = response.data;
                            if(res.code == 200){
                                var list = res.data.collectionList;
                                for(var i = 0; i < list.length; i++){
                                    that.qcollection.push(list[i])
                                }
                            }else{
                                console.log('数据获取失败！');
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    }

                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });

            //我的
            /*
                接口: 获取全部题目
                请求地址: http://localhost:8881/producer/question/select/my
                请求方法: post
                请求参数: 查询条件
                响应内容: 响应结果
            */
            axios({
                method: 'post',
                url: 'http://localhost:8881/producer/question/select/my',
                data: params,
                headers: {
                    token: token
                }
            }).then(function (response) {
                var res = response.data;
                if(res.code == 200){
                    that.myTableDate = res.data.questionList;
                    //难度
                    var table = that.myTableDate;
                    for(var i = 0; i < table.length; i++){
                        var diff = table[i].difficult;
                        that.myTableDate[i].difficult = (diff == 1) ? '简单' : (diff == 2) ? '中等' : '困难';
                    }

                    if(table.length > 0){
                        //发送请求
                        /*
                            接口: 根据Id获取题目集名称
                            请求地址: http://localhost:8881/producer/qcollection/select/ids
                            请求方法: get
                            请求参数: 查询条件
                            响应内容: 响应结果
                        */
                        //获取题目集id
                        var ids = '';
                        for(var i = 0; i < table.length; i++){
                            ids = (i == 0) ? ids + table[i].qcollectionId : ids + '&' + table[i].qcollectionId;
                        }

                        axios({
                            method: 'get',
                            url: 'http://localhost:8881/producer/qcollection/select/ids',
                            params: {ids: ids},
                            headers: {
                                token: token
                            }
                        }).then(function (response) {
                            var res = response.data;
                            if(res.code == 200){
                                var list = res.data.collectionList;
                                for(var i = 0; i < list.length; i++){
                                    that.qcollection.push(list[i])
                                }
                            }else{
                                that.$message.error('数据获取失败！');
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    }

                }else{
                    that.$message.error('数据获取失败！');
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
</script>

<style scoped>
    .up-box, .down-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>